import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploy Saber with ZEIT Now',
  description: 'Create a Saber site and deploy it live with ZEIT Now.',
  name: 'Saber',
  type: 'app',
  published: '2019-11-05T12:00:00.860Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-saber-with-zeit-now',
  example: 'saber',
  demo: 'https://saber.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploy%20Saber%20Apps**%20%3Cbr%2F%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3%250D%250ALnczLm9yZy8yMDAwL3N2ZyI%2BPHBhdGggZD0iTTI1IDQ5YzEzLjI1NSAwIDI0LTEwLjc0NSAyNC0y%250D%250ANFMzOC4yNTUgMSAyNSAxIDEgMTEuNzQ1IDEgMjVzMTAuNzQ1IDI0IDI0IDI0eiIgZmlsbD0iIzAw%250D%250AODM4RiIgc3Ryb2tlPSIjMDA4MzhGIiBzdHJva2Utd2lkdGg9Ii4zMDgiLz48cGF0aCBmaWxsLXJ1%250D%250AbGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE5LjM1NSAyOC44Nmw2LjA2NC0u%250D%250ANTA4IDEuMTQgMi42MzMtMy45MTMgMy44ODItMy4yOSA0LjYyNi40MzMgNS42MTdjLTMuMjE4LS43%250D%250AODYtNS4zNjEtMS41Ni02LjQzLTIuMzI0LTEuMDY4LS43NjMtMi4yMTUtMS44NjEtMy40NDEtMy4y%250D%250AOTNsNS43NDUtNi44NDNoMi41MTRsMS4xNzgtMy43OXoiIGZpbGw9IiNGQkI1MjYiLz48cGF0aCBm%250D%250AaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI1LjM2IDcuNDA0YTIu%250D%250AOTkzIDIuOTkzIDAgMCAwLTEuOTE2IDUuMjkydjQuMDQ1aDMuOTV2LTQuMTVhMi45OTMgMi45OTMg%250D%250AMCAwIDAtMi4wMzUtNS4xODd6bS0xLjMxOCAyLjk5MmExLjMxNyAxLjMxNyAwIDEgMSAyLjYzNCAw%250D%250AIDEuMzE3IDEuMzE3IDAgMCAxLTIuNjM0IDB6IiBmaWxsPSIjZmZmIi8%2BPHBhdGggZD0iTTI3LjM3%250D%250AMyAzNy4yNjVsLTIuOTUzIDIuODMgMS4xNiAxLjIxIDIuMDgzLTEuOTk3IDEuODY2Ljk3OCA1LjAx%250D%250ALjY4LjIyNS0xLjY2MS00LjcxOC0uNjQtMi42NzMtMS40eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGZp%250D%250AbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi43MzYgMjVDMi43MzYg%250D%250AMTIuNzA0IDEyLjcwNCAyLjczNiAyNSAyLjczNlM0Ny4yNjQgMTIuNzA0IDQ3LjI2NCAyNSAzNy4y%250D%250AOTYgNDcuMjY0IDI1IDQ3LjI2NCAyLjczNiAzNy4yOTYgMi43MzYgMjV6TTI1IDQuNDFDMTMuNjMg%250D%250ANC40MTEgNC40MSAxMy42MyA0LjQxIDI1YTIwLjUxIDIwLjUxIDAgMCAwIDUuMSAxMy41NjVsNS40%250D%250AMTgtNy4yMmgzLjA4NmwuMjU1LTIuNjkgMy4yNTktLjYxOHYtOS42MmgtMy4zNTJWMTYuNzRoMTQu%250D%250AMzY0djEuNjc1SDI5LjMxVjMwLjUybDIuMTcuMjIyIDEuNzYxIDIuMzI4aDEuNjI5bDUuNjUzIDUu%250D%250ANDU3QTIwLjUxIDIwLjUxIDAgMCAwIDQ1LjU5IDI1YzAtMTEuMzctOS4yMTgtMjAuNTg5LTIwLjU5%250D%250ALTIwLjU4OXptNy40MyAzMC4zNjRsLS4wMjMtLjAzaC0yLjI5M3YtMS42NzZoMS4wMjRsLS41NTYt%250D%250ALjczNS00LjQwNC0uNDUtLjk3NCAyLjU4Ny0yLjUyIDEuNTQ1LS44NzUtMS40MyAyLjAzLTEuMjQz%250D%250AIDEuMjI1LTMuMjU3Ljg0Ny4wODYtLjY5NC0xLjEyOS01LjM5OCAxLjAyNC0uNjMgNi42MzktMi45%250D%250ANzcgMi41ODEtMS4wOTgtMS4yNjYgMi40Ny0yLjE0Mi4yNzEtMi44NmgtMi4wODhsLTUuMDgzIDYu%250D%250ANzc3QTIwLjUyIDIwLjUyIDAgMCAwIDI1IDQ1LjU5YTIwLjUyIDIwLjUyIDAgMCAwIDE0LjM3LTUu%250D%250AODQ2bC01LjE3OC00Ljk5OGgtMS43MjNsLS4wNC4wM3ptLTcuOTA5LTcuMzA2bC0xLjU1Ni4yOTZ2%250D%250ALTkuMzQ5aDQuOTA4djExLjc0OGwtMS44MzQtMi45ODMtLjA4Mi4wMTZ2LTMuOTkzaC0xLjQzNnY0%250D%250ALjI2NXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4%3D&widths=300&widths=300&heights=300&heights=300',
  editUrl: 'pages/guides/deploying-saber-with-zeit-now.mdx',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Saber](https://saber.land/) is a static website generator that allows you to write your views using Vue, React, and other tools, generating a universal website out of the box.

## Step 1: Set Up Your Saber Project

Set up a Saber site with [`npm`](https://www.npmjs.com/) and move into the project directory:

<Snippet dark text="npm init site my-saber-project && cd my-saber-project" />
<Caption>Initializing a Saber site with <Link href="https://www.npmjs.com/">npm</Link> and moving into the project directory.</Caption>

## Step 2: Deploying Your Saber Site with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
